import React from 'react';
let SuppliersService = React.createClass({
    
    getInitialState() {

        return {
            isSelected: '1'
        }
    },

    handleChange(e) {
        this.setState({
            isSelected: e.target.id
        })
    },
    
    render() {
        let isSelected = this.state.isSelected;
        var isBox1Show = isSelected == 1 ?'block' : 'none';
        var isBox2Show = isSelected == 2 ?'block' : 'none';
        var isBox3Show = isSelected == 3 ?'block' : 'none';
        var isBox4Show = isSelected == 4 ?'block' : 'none';
        var isBox5Show = isSelected == 5 ?'block' : 'none';
        var isBox6Show = isSelected == 6 ?'block' : 'none';
        var isBox7Show = isSelected == 7 ?'block' : 'none';
        var isBox8Show = isSelected == 8 ?'block' : 'none';
        var isBox9Show = isSelected == 9 ?'block' : 'none';

        return (
            <div>
                <div className="serviceBanner"></div>
                <div className="serviceContainer">
                    <ul className="wrap1180" >
                        <span>服务类型</span>
                        <li onClick={this.handleChange} id={1} className={isSelected == '1' ? 'hover' : 'notHover'}>全部</li>
                        <li onClick={this.handleChange} id={2} className={isSelected == '2' ? 'hover' : 'notHover'}>设计</li>
                        <li onClick={this.handleChange} id={3} className={isSelected == '3' ? 'hover' : 'notHover'}>建材</li>
                        <li onClick={this.handleChange} id={4} className={isSelected == '4' ? 'hover' : 'notHover'}>软装</li>
                        <li onClick={this.handleChange} id={5} className={isSelected == '5' ? 'hover' : 'notHover'}>物流</li>
                        <li onClick={this.handleChange} id={6} className={isSelected == '6' ? 'hover' : 'notHover'}>施工</li>
                        <li onClick={this.handleChange} id={7} className={isSelected == '7' ? 'hover' : 'notHover'}>托管</li>
                        <li onClick={this.handleChange} id={8} className={isSelected == '8' ? 'hover' : 'notHover'}>家政</li>
                        <li onClick={this.handleChange} id={9} className={isSelected == '9' ? 'hover' : 'notHover'}>搬家</li>
                        
                    </ul>
                    <div className="con wrap1180">
                        <ul className="clearfix seriveTab " style={{"display":isBox1Show}} >
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">宁波爱美家墙纸</span><span className="tel"></span></p>
                                    <p>服务项目：供应环保墙纸</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">杭州易驻商贸</span><span className="tel"></span></p>
                                    <p>服务项目：供应免漆门、特价瓷砖、陶瓷卫浴</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">爱租派金牌项目经理人</span><span className="tel"></span></p>
                                    <p>服务项目：施工</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">广东金亿美家具</span><span className="tel"></span></p>
                                    <p>服务项目：家具厂家</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">小空网</span><span className="tel"></span></p>
                                    <p>服务项目：空调供应商</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">杭州立尔窗帘</span><span className="tel"></span></p>
                                    <p>服务项目：窗帘供应商</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">嵊州百得电器</span><span className="tel"></span></p>
                                    <p>服务项目：供应燃气灶、油烟机</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">爱租派首租生活套包</span><span className="tel"></span></p>
                                    <p>服务项目：床上用品手工定制</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">云柚科技</span><span className="tel"></span></p>
                                    <p>服务项目：智能门锁</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo1.jpg")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">易驻物业</span><span className="tel"></span></p>
                                    <p>服务项目：家政保洁报修搬家</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                        </ul>
                        <ul className="clearfix seriveTab" style={{"display":isBox2Show}}>
                        </ul>
                        <ul className="clearfix seriveTab" style={{"display":isBox3Show}}>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">宁波爱美家墙纸</span><span className="tel"></span></p>
                                    <p>服务项目：供应环保墙纸</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">杭州易驻商贸</span><span className="tel"></span></p>
                                    <p>服务项目：供应免漆门、特价瓷砖、陶瓷卫浴</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                        </ul>
                        <ul className="clearfix seriveTab" style={{"display":isBox4Show}}>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">广东金亿美家具</span><span className="tel"></span></p>
                                    <p>服务项目：家具厂家</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">小空网</span><span className="tel"></span></p>
                                    <p>服务项目：空调供应商</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">杭州立尔窗帘</span><span className="tel"></span></p>
                                    <p>服务项目：窗帘供应商</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">嵊州百得电器</span><span className="tel"></span></p>
                                    <p>服务项目：供应燃气灶、油烟机</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                        </ul>
                        <ul className="clearfix seriveTab" style={{"display":isBox5Show}}>
                        </ul>
                        <ul className="clearfix seriveTab" style={{"display":isBox6Show}}>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">爱租派金牌项目经理人</span><span className="tel"></span></p>
                                    <p>服务项目：施工</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                        </ul>
                        <ul className="clearfix seriveTab" style={{"display":isBox7Show}}>
                        </ul>
                        <ul className="clearfix seriveTab" style={{"display":isBox8Show}}>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo1.jpg")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">易驻物业</span><span className="tel"></span></p>
                                    <p>服务项目：家政保洁报修搬家</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                        </ul>
                        <ul className="clearfix seriveTab" style={{"display":isBox9Show}}>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">爱租派首租生活套包</span><span className="tel"></span></p>
                                    <p>服务项目：床上用品手工定制</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                            <li className="clearfix">
                                <div className="pic"><img src={require("./../../assets/img/official/serveLogo.png")} width="110" height="111" /></div>
                                <div className="info">
                                    <p className="company clearfix"><span className="name">云柚科技</span><span className="tel"></span></p>
                                    <p>服务项目：智能门锁</p>
                                    <p>服务区域：西湖 拱墅 江干 下城 上城 余杭 萧山 滨江 杭州周边</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div></div>
                    <div id="kkpager"></div>
                </div>
            </div>
        )
    }
})
export default SuppliersService;